<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">班级列表信息</b>
              </div>
            </el-col>
          </el-row>
          <div style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-table
              v-loading="loading"
              :data="tableData.filter(data => !search || data.classroomName.toLowerCase().includes(search.toLowerCase()))"
              style="margin: 20px auto;width: 90%;border: 1px #eee">
              <el-table-column
                label="班级名称"
                prop="classroomName">
              </el-table-column>
              <el-table-column
                label="班级人数"
                prop="classroomPeopleNum">
              </el-table-column>
              <el-table-column
                label="班级描述"
                prop="classroomDescribe">
              </el-table-column>
              <el-table-column
                align="center">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入班级名称搜索"/>
                </template>
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="medium"
                             @click="handleEdit(scope.$index, scope.row)" circle></el-button>
                  <el-tooltip class="item" effect="dark" content="此操作将永久删除此班级信息，请谨慎操作！！" placement="top">
                    <el-button type="danger" icon="el-icon-delete" size="medium"
                               @click="handleDelete(scope.$index, scope.row)" circle></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 删除班级确认框-->
          <div>
            <el-dialog
              icon="warning"
              title="提示"
              :visible.sync="dialogVisible"
              width="27%"
              :before-close="handleClose">
              <span> <i class="el-icon-delete-solid"></i> &nbsp;&nbsp;&nbsp;再次确定永久删除此班级吗？？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doDelete">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <!--编辑班级信息-->
          <div>
            <el-dialog title="编辑班级信息" :visible.sync="dialogFormVisible">
              <el-form :model="editClassroom">
                <el-form-item label="班级名称" label-width="100px">
                  <el-input v-model="editClassroom.classroomName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级人数" label-width="100px">
                  <el-input v-model="editClassroom.classroomPeopleNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级描述" label-width="100px">
                  <el-input v-model="editClassroom.classroomDescribe" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="uploadClassroom">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'

export default {
  name: 'teacherClassList',
  data () {
    return {
      deleteId: '',
      teacherId: '',
      tableData: [],
      search: '',
      loading: false,
      dialogVisible: false,
      dialogFormVisible: false,
      editClassroom: []
    }
  },
  created () {
    this.getTeacherId()
    this.loading = true
    this.getAllClassroom()
  },
  methods: {
    getTeacherId () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
    },
    // 编辑班级信息
    handleEdit (index, row) {
      this.dialogFormVisible = true
      this.editClassroom = row
    },
    // 删除班级信息
    handleDelete (index, row) {
      this.dialogVisible = true
      this.deleteId = row.id
    },
    // 获取所有班级信息
    getAllClassroom () {
      this.loading = true
      this.$axios.post('http://localhost:8888/teacherGetAllClassByTeacherId/' + this.teacherId)
        .then(res => {
          if (res.data.flag) {
            this.$message({
              message: '班级信息获取成功',
              type: 'success'
            })
            this.tableData = res.data.data
            this.loading = false
          }
        }).catch(err => {
          this.loading = true
          return Promise.reject(err)
        })
    },
    // 编辑学生信息
    uploadClassroom () {
      this.dialogFormVisible = false
      this.$axios.post('http://localhost:8888/teacherUploadClassroom', this.editClassroom).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，编辑班级信息成功',
            type: 'success'
          })
          this.getAllClassroom()
        } else {
          this.$message.error('很抱歉，编辑班级信息失败啦')
        }
      }).catch((err) => {
        return Promise.reject(err)
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 删除班级
    doDelete () {
      this.dialogVisible = false
      this.$axios.post('http://localhost:8888/teacherDeleteClassroom/' + this.deleteId).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，删除班级成功',
            type: 'success'
          })
          this.getAllClassroom()
        } else {
          this.$message.error('很抱歉，删除班级失败啦')
        }
      }).catch((err) => {
        return Promise.reject(err)
      })
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
</style>

<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #cadcf5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
